<!DOCTYPE html>
<html lang="en">
<head>
    <script src="/static/js/dev.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--bootstrap插件-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="/static/plugin/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/static/plugin/jo/joUI.css" rel="stylesheet"/>
    <!--字体插件-->
    <link href="/static/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="/static/plugin/layui-2.4.3/css/layui.css" rel="stylesheet"/>
    <!--ztree-->
    <link href="/static/plugin/zTree/css/metroStyle/metroStyle.css" rel="stylesheet"/>
    <!--common-->
    <link href="/static/css/common.css" rel="stylesheet"/>

    <title>个人信息</title>
    <style>
        .info-header-bar{width: 110px;
            height: 110px; margin: 0px auto; border-radius: 55px;}
        .info-header{width: 100%;
            height: 100%; border-radius: 50%;
            cursor: pointer;}
        .info-text{width: 100%;
            height: auto; padding: 5px 0px; text-align: center;line-height: 1.7;}
        .info-stat{width: 100%; height: 80px; background-color: #F6F9FD;margin-top: 30px;}
        .stat-ele{width: 33%;height: 80px;display:block;float: left;padding:15px;margin: 0px; line-height: 25px;text-align: center;}
        .stat-number{font-size: 16px; color: #526069;}
        .stat-text{color: #A3AFB7;}

        .info-detail{width: 100%;padding: 17px 0px 17px 17px;position: relative;line-height: 1.7;}
        .config{position: absolute;top: 15px;right:20px;}
        .config-ul{list-style: none;position: absolute;top: 18px;right: -3px;padding: 3px 0px;margin: 0px;
            width: 66px;text-align: center;display: none;background-color: #ffffff;border: #f3f3f4 solid 1px;}
        .config-ul>li{height: 30px;line-height: 30px;}
        .config:hover>.config-ul{display: block;}
        .config-ul>li:hover{background-color: #F3F3F4;}

        .temp-title{
            line-height: 25px;border-left: #4E97D9 solid 5px;text-indent: 5px;font-weight: 700;
        }
    </style>
</head>
<body class="skin-default">

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
            <div class="card" style="padding-top: 20px;">
                <div class="info-header-bar">
                    <img class="info-header" src="/static/images/wjy.jpg" onclick="upload()"/>
                </div>
                <div class="info-text" id="loginUserName">

                </div>
                <div class="info-text">
                    上次登录：<span id="lastLoginTime"></span>
                </div>
                <div class="info-stat">
                    <div class="stat-ele">
                        <span class="stat-number" id="loginNum">-.-</span>
                        <br/>
                        <span class="stat-text">登录</span>
                    </div>
                    <div class="stat-ele">
                        <span class="stat-number" id="messageNum">-.-</span>
                        <br/>
                        <span class="stat-text">消息</span>
                    </div>
                    <div class="stat-ele">
                        <span class="stat-number" id="logNum">-.-</span>
                        <br/>
                        <span class="stat-text">日志</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>

        <div class="col-md-9">
            <div class="info-detail card">
                <div class="cursor-hand config">
                    <i class="fa fa-navicon" aria-hidden="true"></i>&nbsp;编辑
                    <ul class="config-ul">
                        <li onclick="updatePassword()">修改密码</li>
                        <li onclick="updateInfo()">编辑信息</li>
                    </ul>
                </div>
                <div class="temp-title">
                    个人信息
                </div>
                <div style="padding-top: 5px;line-height: 2;">
                    <p>姓名：<span id="name"></span></p>
                    <p>生日：<span id="txt_birthday"></span></p>
                    <p>性别：<span id="sex"></span></p>
                    <p>电话：<span id="tel"></span></p>
                    <p>邮箱：<span id="email"></span></p>
                    <p>单位：<span id="company"></span></p>
                </div>
            </div>
        </div>
    </div>
</div>

<!--修改密码模态框-->
<script type="template" id="updatePwdBoxHtml">
    <div id="updatePwdBox" style="padding: 15px;">
        <form class="form-horizontal" id="updatePwdForm">
            <div class="young-form-item col-xs-12 ">
                <div class="young-form-label">旧密码</div>
                <div class="young-form-tips"></div>
                <div class="young-form-input-block">
                    <input type="password" class="form-control" id="old" placeholder="" ErrEmpty="请填写旧密码">
                </div>
            </div>
            <div class="young-form-item col-xs-12 ">
                <div class="young-form-label">新密码</div>
                <div class="young-form-tips"></div>
                <div class="young-form-input-block">
                    <input type="password" class="form-control" id="new" placeholder="" ErrEmpty="请填写新密码">
                </div>
            </div>
            <div class="young-form-item col-xs-12 ">
                <div class="young-form-label">重复新密码</div>
                <div class="young-form-tips"></div>
                <div class="young-form-input-block">
                    <input type="password" class="form-control" id="new2" placeholder="" ErrEmpty="请重复新密码">
                </div>
            </div>
        </form>
    </div>
</script>

<!--修改个人信息-->
<script type="template" id="updateInfoBoxHtml">
    <div id="updateInfoBox" style="padding: 15px;">
        <form class="form-horizontal" id="updateInfoForm">
            <div class="young-form-item col-md-12">
                <div class="young-form-label">姓名</div>
                <div class="young-form-tips"></div>
                <div class="young-form-input-block">
                    <input type="text"   name="name" value="" class="form-control "   />
                </div>
            </div>
            <div class="young-form-item col-md-12">
                <div class="young-form-label">出生日期</div>
                <div class="young-form-tips"></div>
                <div class="young-form-input-block">
                    <input type="text" id="birthday" value="" name="birthday" class="form-control "   />
                </div>
            </div>
            <div class="young-form-item col-md-12">
                <div class="young-form-label">性别</div>
                <div class="young-form-tips"></div>
                <div class="young-form-input-block">
                    <select  name="sex" class="form-control">
                        <option value=""></option>
                        <option value="1">男</option>
                        <option value="0">女</option>
                    </select>
                </div>
            </div>
            <div class="young-form-item col-md-12">
                <div class="young-form-label">联系电话</div>
                <div class="young-form-tips"></div>
                <div class="young-form-input-block">
                    <input type="text"   name="tel" value="" class="form-control "   />
                </div>
            </div>
            <div class="young-form-item col-md-12">
                <div class="young-form-label">常用邮箱</div>
                <div class="young-form-tips"></div>
                <div class="young-form-input-block">
                    <input type="text"   name="email" value="" class="form-control "  ErrMail="邮箱格式有误" />
                </div>
            </div>
        </form>
    </div>
</script>



<!--配置信息-->
<script src="/static/js/config.js"></script>
<!--jquery-->
<script src="/static/plugin/jquery/jquery-3.3.1.js"></script>
<script src="/static/plugin/jquery/jquery.cookie.js"></script>
<!--bootstrap-->
<script src="/static/plugin/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="/static/plugin/other/html5shiv.js"></script>
<script src="/static/plugin/other/respond.min.js"></script>
<![endif]-->
<!--layui-->
<script src="/static/plugin/layui-2.4.3/layui.all.js"></script>
<!--ztree-->
<script src="/static/plugin/zTree/js/jquery.ztree.all.js"></script>
<!--common-->
<script src="/static/js/common.js"></script>
<!--jo-->
<script src="/static/plugin/jo/jo.js"></script>
<script src="/static/plugin/jo/jo-adapt.js"></script>
<script src="/static/plugin/jo/jo-page-view.js"></script>
<script src="/static/plugin/jo/jo-page-form.js"></script>
<script src="/static/plugin/jo/jo-listener.js"></script>
<script type="text/javascript">
    $(function () {
        initInfo();
    });
    var user;//用户信息
    //初始化信息
    function initInfo(){
        jo.postAjax("{URL_UMS}ums/user/queryMyInfo", {}, function(json){
            if(json && json.code == "0" && json.data && json.data.length > 0){
                var personInfo = json.data[0];
                var userInfo = personInfo.userInfo;
                userInfo.birthday = jo.formatDate(userInfo.birthday);
                user = userInfo;
                $("#loginUserName").text(userInfo.name);
                $("#name").text(userInfo.name);
                $("#txt_birthday").text(userInfo.birthday);
                if(userInfo.sex == "1"){
                    $("#sex").text("男");
                }else if(userInfo.sex == "0"){
                    $("#sex").text("女");
                }else{
                    $("#sex").text(jo.getDefVal(userInfo.sex, ''));
                }
                $("#tel").text(userInfo.tel);
                $("#email").text(userInfo.email);
                $("#company").text(userInfo.companyName);
                $("#lastLoginTime").text(jo.formatTime(userInfo.lastLoginTime));
                if(userInfo.header){
                    $("img.info-header").attr("src", URL_FS+"fs/file/image/"+userInfo.header);
                }
                $("#loginNum").text(personInfo.loginNum);//登录次数
                /*
                $("#messageNum").text(info.messageNum);
                $("#logNum").text(info.logNum);*/
            }
        }, true);
    }
    //上传头像
    function upload(){
        jo.uploadFile("{URL_UMS}ums/user/uploadHeader?folderId=header", function(success, file, json){
            if(success && json){
                jo.closeUploadDialog();//关闭上传窗口
                if(json.code == "0"){
                    jo.showMsg("上传成功!", {icon:1});
                    initInfo();
                }else{
                    jo.showMsg(json.info);
                }
            }
        });
    }
    //修改密码
    function updatePassword(){
        jo.showDialog($("#updatePwdBoxHtml").html(), "updatePwd", true, {title:"修改密码", area:["450px","280px"], btn:["确定","取消"], btn1:function(index){
            if(jo.checkForm($("#updatePwdForm"))){
                var old = $("#old").val();
                var n = $("#new").val();
                var n2 = $("#new2").val();
                if(n != n2){
                    jo.showMsg("两次输入的新密码不一致!");
                    return;
                }
                jo.postAjax("{URL_UMS}ums/user/updatePassword", {"oldPwd":old, "newPwd":n}, function(json){
                    if(json && json.code == 0){
                        jo.alert("密码修改成功！", {icon:1});
                    }else{
                        jo.alert(json.info, {icon:2});
                    }
                    jo.reset("updatePwdForm");//重置表单
                    jo.close(index);//关闭
                });
            }
        }});
    }
    //修改个人信息
    function updateInfo(){
        jo.showDialog($("#updateInfoBoxHtml").html(), "updateInfo", true, {title:"编辑个人信息", area:["500px","360px"], btn:["确定","取消"], success:function(){
            joForm.initFormValue($("#updateInfoForm"), user);//初始化表单值
            layui.laydate.render({
                elem: '#birthday' //注册日期控件
            });
        }, btn1:function(index){
            if(jo.checkForm($("#updateInfoForm"))){
                jo.postAjax("{URL_UMS}ums/user/updatePersonInfo", jo.form2Json('updateInfoForm'), function(json){
                    if(json && json.code == 0){
                        jo.alert("修改成功！", {icon:1}, function(){
                            location.reload();
                        });
                    }else{
                        jo.alert(json.info, {icon:2});
                    }
                    jo.close(index);//关闭
                });
            }
        }});
    }
</script>

</body>
</html>
